<template>
  <div v-loading="loading">
    <div v-if="isInput == 0">
      <el-table :data="tableData">
        <el-table-column width="100" prop="isDefault">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.isDefault == 1">默认地址</el-tag>
          </template>
        </el-table-column>

        <el-table-column prop="userName_s" label="收货人" width="110"></el-table-column>
        <el-table-column prop="gender_s" label="性别" width="110"></el-table-column>
        <el-table-column prop="phoneNumber" label="手机号" width="120"></el-table-column>
        <el-table-column prop="area" label="地区" width="120"></el-table-column>
        <el-table-column prop="detailAddress" width="300" label="详细地址"></el-table-column>

        <el-table-column>
          <template slot-scope="scope">
            <el-button
              type="success"
              @click="setDefault(scope.row.addressId)"
            >设置为默认地址</el-button>
            <el-button type="primary" @click="inputAddress(scope.row.addressId)">修改</el-button>
            <el-button type="danger" @click="deleteAddress(scope.row.addressId)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <br />
      <br />

      <el-button type="primary" @click="inputAddress(0)">添加收货地址</el-button>
    </div>

    <div v-if="isInput == 1">
      <span class="tip">收货人姓名：</span>
      <el-input v-model="firstName"></el-input>
      <el-input v-model="lastName"></el-input>
      <br />
      <br />

      <span class="tip">手机号码：</span>
      <el-input v-model="phoneNumber"></el-input>
      <br />
      <br />

      <span class="tip">性别：</span>
      <el-radio v-model="gender" label="1">男</el-radio>
      <el-radio v-model="gender" label="0">女</el-radio>
      <br />
      <br />

      <span class="tip">地区：</span>
      <el-input v-model="area"></el-input>
      <br />
      <br />

      <span class="tip">具体地址：</span>
      <el-input style="width: 400px" v-model="detailAddress"></el-input>
      <br />
      <br />

      <el-button type="primary" plain @click="cancel()">取消</el-button>
      <el-button type="primary" @click="saveAddress()">确认</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "Address",
  data() {
    return {
      loading: true,
      tableData: [],

      firstName: "",
      lastName: "",
      gender: "1",
      phoneNumber: "",
      area: "",
      detailAddress: "",

      isInput: 0,
      selectAddressId: 0,
    };
  },
  methods: {
    setDefault(addressId) {
      // console.log(addressId);
      var url =
        process.env.URL_HEAD + "/touser/user/page/update/defaultAddress";

      this.$http
        .get(url, {
          params: { addressId: addressId },
          withCredentials: true,
        })
        .then(
          (response) => {
            if (response.data.status == "ok") {
              this.$message.success("设置成功！");
              this.initAddress();
            } else {
              this.$message.error("设置失败");
            }
          },
          (response) => {
            this.$message.error("系统异常，请重试");
          }
        );
    },
    saveAddress() {
      var address = {
        firstName: this.firstName,
        lastName: this.lastName,
        gender: this.gender,
        phoneNumber: this.phoneNumber,
        area: this.area,
        detailAddress: this.detailAddress,
      };

      if (this.selectAddressId == 0) {
        // console.log(address);
        var url = process.env.URL_HEAD + "/touser/user/page/save/address";

        this.$http.post(url, address, { withCredentials: true }).then(
          (response) => {
            if (response.data.msg == "success") {
              this.cancel();
              this.initAddress();

              this.$message.success("添加成功！");
            } else {
              this.$message.error("添加失败");
            }
          },
          (response) => {
            this.$message.error("系统异常，请重试");
          }
        );
      } else {
        var url = process.env.URL_HEAD + "/touser/user/address/update";

        address.addressId = this.selectAddressId;

        this.$http.post(url, address).then(
          (response) => {
            if (response.data.msg == "success") {
              this.cancel();
              this.initAddress();

              this.$message.success("修改成功！");
            } else {
              this.$message.error("修改失败");
            }
          },
          (response) => {
            this.$message.error("系统异常，请重试");
          }
        );
      }
    },
    inputAddress(addressId) {
      this.isInput = 1;
      this.selectAddressId = addressId;

      if (this.selectAddressId != 0) {
        var url =
          process.env.URL_HEAD + "/touser/user/address/info/" + addressId;

        this.$http.get(url).then(
          (response) => {
            // console.log(response.data);
            var add = response.data.address;

            this.firstName = add.firstName;
            this.lastName = add.lastName;
            this.gender = add.gender;
            this.phoneNumber = add.phoneNumber;
            this.area = add.area;
            this.detailAddress = add.detailAddress;
          },
          (response) => {
            this.$message.error("系统异常，请重试");

            this.cancel();
          }
        );
      }
    },
    cancel() {
      this.isInput = 0;
      this.selectAddressId = 0;

      this.firstName = "";
      this.lastName = "";
      this.gender = "1";
      this.phoneNumber = "";
      this.area = "";
      this.detailAddress = "";
    },
    deleteAddress(addressId) {
      // console.log(addressId);
      var url = process.env.URL_HEAD + "/touser/user/address/delete";

      this.$confirm("确定删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$http.post(url, [addressId]).then(
            (response) => {
              if (response.data.msg == "success")
                this.$message.success("删除成功！");
              else this.$message.error("删除失败");

              this.initAddress();
            },
            (response) => {
              this.$message.error("系统异常，请重试");
            }
          );
        })
        .catch(() => {
          this.$message.info("已取消");
        });
    },
    initAddress() {
      // console.log("send");
      var url = process.env.URL_HEAD + "/touser/user/page/init/address";

      this.$http
        .get(url, {
          withCredentials: true,
        })
        .then(
          (response) => {
            for (var i = 0; i < response.data.address.length; i++) {
              var add = response.data.address[i];
              // console.log(add);

              add.userName_s = add.firstName + " " + add.lastName;

              if (add.gender == 0) add.gender_s = "女";
              else if (add.gender == 1) add.gender_s = "男";
              else add.gender_s = "?";
            }

            this.tableData = response.data.address;

            console.log("initAddress ok");

            this.loading = false;
          },
          (response) => {
            console.log("initAddress error");

            this.loading = false;
          }
        );
    },
  },
  created: function () {
    this.initAddress();
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.el-input {
  width: 200px;
}

.tip {
  font-size: 16px;
}

.content {
  font-size: 16px;
}
</style>
